<template>
  <div>
    <!-- 分配权限的弹层 -->
    <el-dialog
      title="分配权限(一级为路由页面查看权限-二级为按钮操作权限)"
      :visible="showAssignDialog"
      @close="closeAssignDialog"
      @open="openAssignDialog"
    >
      <!-- 权限点数据展示 -->
      <el-tree
        ref="tree"
        :data="permissionData"
        :props="{ label: 'name' }"
        :default-expand-all="true"
        :show-checkbox="true"
        :check-strictly="true"
        node-key="id"
      />
      <template #footer>
        <div style="text-align: right;">
          <el-button @click="closeAssignDialog">取消</el-button>
          <el-button type="primary" @click="confirm">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getPermissionList, assignPerm } from '@/api/permisson'
import { transtree } from '@/utils/transTreeData'
import { getRoleDetail } from '@/api/setting'

export default {
  name: 'AssignPermiss',
  props: {
    showAssignDialog: {
      type: Boolean
    },
    curId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      permissionData: [] // 存储权限数据
    }
  },
  methods: {
    async hGetPermissionList() {
      // 获取权限列表
      const res = await getPermissionList()
      // console.log(res.data)
      this.permissionData = transtree(res.data)
    },
    async hGetDetail() {
      // 获取角色列表
      const res = await getRoleDetail(this.curId)
      console.log(this.$refs.tree)
      this.$refs.tree.setCheckedKeys(res.data.permIds)
    },
    confirm() {
      const nodeList = this.$refs.tree.getCheckedNodes()
      // 把对象中的id单独拿出来组成一个新的数据
      const permIds = nodeList.map(item => item.id)
      // {id:角色id, permIds:[] 所有选中的节点的id组成的数组}
      assignPerm({ id: this.curId, permIds })
      this.closeAssignDialog()
    },
    // 关闭弹框
    closeAssignDialog() {
      this.$emit('close-dialog')
    },
    // 打开弹框
    openAssignDialog() {
      this.hGetPermissionList()
      this.hGetDetail()
    }
  }
}
</script>

<style>

</style>
